<template>
  <main class="main">
    <!-- 右边内容部分 -->
    <div class="main-content">
      <div class="main-left">
        <div class="left-content">
          <!-- 顶部工具类-推荐/关注 -->
          <div>
            <!-- 设置黏性对齐 -->
            <div class="back_page">
              <div class="back_btn" :title="$t('index.back')">
                <div @click="back">
                  <i class="el-icon-arrow-left"></i
                  ><span class="nickname">{{
                    CurrentUserInfo.user_nickname
                  }}</span>
                </div>
              </div>
            </div>
            <!-- 认证页面组件 -->
            <div class="auth_panel">
              <!-- 注意事项 -->
              <div class="auth_tip_message">
                {{ $t('auth.tip') }}
              </div>
              <!-- 认证区域 -->
              <div class="auth_banner">
                <div class="tip_txt">{{ $t('auth.title') }}</div>
                <div class="choose_txt">{{ $t('auth.message') }}</div>
                <div class="auth_choose_panel">
                  <!-- 认证选项 -->
                  <div
                    :class="
                      is_choose == 1 ? 'auth_personal choosed' : 'auth_personal'
                    "
                    @click="choose1"
                  >
                    <div class="msg1">{{ $t('auth.select1_msg1') }}</div>
                    <div class="msg2">{{ $t('auth.select1_msg2') }}</div>
                    <div class="msg3">{{ $t('auth.select1_msg3') }}</div>
                  </div>
                  <div
                    :class="
                      is_choose == 2
                        ? 'auth_organizaion choosed'
                        : 'auth_organizaion'
                    "
                    @click="choose2"
                  >
                    <div class="msg1">{{ $t('auth.select2_msg1') }}</div>
                    <div class="msg2">{{ $t('auth.select2_msg2') }}</div>
                    <div class="msg3">{{ $t('auth.select2_msg3') }}</div>
                  </div>
                </div>
                <!-- 订阅认证按钮 -->
                <div class="auth_btn_panel">
                  <button class="el-button auth_btn" @click="authHandler">
                    {{ $t('auth.authbtn') }}
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 主页右侧模板 -->
      <MainRight />
    </div>
  </main>
</template>
    <script>
//MainRight
import MainRight from "@/components/MainRight.vue";

export default {
  name: "AuthMainContent",
  components: {
    MainRight,
  },
  props: {
    msg: String,
  },
  data() {
    return {
      is_choose: 1,
      CurrentUserInfo: {
        user_id: JSON.parse(localStorage.getItem("user")).user_id,
        account: JSON.parse(localStorage.getItem("user")).username
          ? JSON.parse(localStorage.getItem("user")).username
          : "账号",
        user_headimg: JSON.parse(localStorage.getItem("user")).user_headimg
          ? JSON.parse(localStorage.getItem("user")).user_headimg
          : require("@/assets/img/user.png"),
        user_nickname: JSON.parse(localStorage.getItem("user")).user_nickname,
        auth_id: this.is_choose ? this.is_choose : 0,
        auth_input_limit:1000,
      },
    };
  },
  mounted() {},
  methods: {
    back() {
      this.$router.go(-1);
    },
    choose1() {
      //个人认证
      this.is_choose = 1;
      this.CurrentUserInfo.auth_input_limit = 1000;
    },
    choose2() {
      //机构认证
      this.is_choose = 2;
      this.CurrentUserInfo.auth_input_limit = 5000;
    },
    //执行认证
    async authHandler() {
      this.CurrentUserInfo.auth_id = this.is_choose;
      
      let res = await this.$http.post("updateUserAuth", this.CurrentUserInfo);

      if (res.state == 200) {
        this.refleshUserInfo();
        this.$message({
          message: res.message,
          type: "success",
        });
      } else {
        this.$message({
          showClose: true,
          message: res.message,
          type: "error",
        });
      }
    },
    //认证成功后重新加载当前用户信息
    async refleshUserInfo() {
      let res = await this.$http.post(
        "getUserInfoByUserId",
        this.CurrentUserInfo
      );
      if (res.state == 200) {
        this.$store.commit("user", JSON.stringify(res.data));
      }
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* 右侧主内容 */
.main {
  width: 990px;
  min-height: 415px;
  padding: 0 10px;
}

.main-content {
  display: flex;
  justify-content: space-between;
}

/* 内容左侧样式 */
.main-left {
  max-width: 600px;
  background-color: #ffffff;
  border-radius: 5px;
  margin-right: 15px;
}

.left-content {
  display: flex;
  width: 600px;
  min-height: 100%;
}

/* 顶部用户背景及信息 */
.user_bg_panel {
  border-radius: 10px;
  display: flex;
  position: relative;
}

.back_page {
  position: sticky;
  /* 不要忘了设置 top */
  top: 0;
  padding: 10px 10px;
  background-color: rgba(255, 255, 255, 0.75);
  color: #000;
  z-index: 299;
  margin-bottom: -38px;
  box-shadow: 0px 1px 3px #939393;
}

.back_btn {
  cursor: pointer;
  display: flex;
}

.nickname {
  font-weight: 700;
}

.auth_panel {
  display: flex;
  flex-direction: column;
  margin-top: 42px;
  min-height: 85vh;
  height: 100%;
  max-width: 600px;
  width:100%;
}

.auth_tip_message {
  padding: 16px 10px;
}

/* 认证区域样式 */
.auth_banner {
  display: flex;
  flex-direction: column;  
  width: 600px;
  align-items: center;
  margin: 16px 0;
}

.tip_txt {
  display: flex;
  color: rgb(15, 20, 25);
  font-size: 31px;
  line-height: 36px;
  font-weight: 800;
}

.choose_txt {
  display: flex;
  color: rgb(15, 20, 25);
  font-size: 15px;
  line-height: 20px;
  margin: 20px 0;
}

.auth_choose_panel {
  display: flex;
  justify-content: space-between;
  flex: 1;
  max-width: 390px;
  width: 100%;
}

.auth_personal {
  margin-right: 20px;
}
.auth_personal,
.auth_organizaion {
  display: flex;
  flex-direction: column;
  max-width: 50%;
  flex: 1;
  padding: 16px;
  border: 2px solid rgba(0, 0, 0, 0);
  box-shadow: 0 0 15px rgba(101, 119, 134, 0.2),
    0 0 3px 1px rgba(101, 119, 134, 0.15);
  border-radius: 10px;
  cursor: pointer;
}

.msg1 {
  font-size: 15px;
  line-height: 16px;
}

.msg3 {
  font-size: 13px;
  line-height: 16px;
}

.msg1,
.msg2,
.msg3 {
  color: rgb(83, 100, 113);
  margin-top: 4px;
}

.msg2 {
  font-size: 15px;
  font-weight: 800;
  line-height: 16px;
  color: rgb(8, 8, 8);
}

.choosed {
  border-color: rgba(29, 155, 240, 1);
}
.auth_btn_panel {
  display: flex;
  justify-content: center;
  margin-top: 32px;
  width: 100%;
}

.el-button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  transition: 0.1s;
  font-weight: 500;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
}

.auth_btn {
  padding: 16px 32px;
  border-radius: 30px;
  background-color: rgba(29, 155, 240, 1);
  color: rgba(255, 255, 255, 1);
  max-width: 390px;
  width: 100%;
}

.auth_btn:hover {
  background-color: rgba(29, 155, 240, 0.7);
}

@media screen and (max-width: 720px) {
  .main {
    width: 100%;
    padding: 0;
    margin-bottom: 52px;
  }
  .main-left {
    width: 100%;
    margin-right: 0px;
    min-width: 390px;
  }

  .left-content {
    width: 100%;
  }

  .user_avatar {
    margin: -35px 20px 0 0;
    padding: 1px;
    width: 60px;
    height: 60px;
  }
  .auth_banner{
    justify-content: center;
    width:100%;
  }

  .auth_personal,
  .auth_organizaion {    
    max-width: 40%;
  }

  .auth_personal{
    margin-right:20px;
  }
}

@media (max-width: 1050px) {
  .main {
    max-width: 600px;
  }
  .main-right {
    display: none;
    width: auto;
  }
}

@media (max-width: 1300px) {
}
</style>
